<template>
  <div ref="chartContainer" style="height: 500px;width: 1000px"></div>
</template>

<script>
import Highcharts from 'highcharts';

export default {
  mounted() {
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    function activeLastPointToolip(chart) {
      var points = chart.series[0].points;
      chart.tooltip.refresh(points[points.length - 1]);
    }
    // eslint-disable-next-line no-unused-vars
    const chart = Highcharts.chart(this.$refs.chartContainer, {
      chart: {
        type:'spline',
        marginRight: 10,
        events: {
          load: function () {
            var series = this.series[0],
                chart = this;
            activeLastPointToolip(chart);
            setInterval(function () {
              var x = (new Date()).getTime(),
                  y = Math.random();
              series.addPoint([x, y], true, true);
              activeLastPointToolip(chart);
            }, 1000);
          }
        }
      },
      title: {
        text: '股票实时涨跌幅'
      },
      xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
      },
      yAxis: {
        title: {
          text: null
        }
      },
      tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      series: [{
        name: '股票动向',
        data: (function () {
          var data = [],
              time = (new Date()).getTime(),
              i;
          for (i = -19; i <= 0; i += 1) {
            data.push({
              x: time + i * 1000,
              y: Math.random()
            });
          }
          return data;
        }())
      }]
    });
  }
}
</script>